<template>
        <div class="tac">
            <el-menu
            :default-active="active"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            @select = "select"
            background-color="#e5e5e5"
            text-color="#333333"
            active-text-color="#db1004">
                <el-submenu  v-for="(v,i) in gList" :key="i" :index="String(i)" v-if="v.children !==null">
                    <template slot="title">
                            <span>{{ v.name }}</span>
                    </template>
                        <el-menu-item :index="String(vt.id)" v-for="(vt,it) in v.children" :key="it" v-if="vt.children == null">{{ vt.name }}</el-menu-item>
                        <el-submenu :index="String(vt.id)" v-for="(vt,it) in v.children" :key="it" v-else>
                            <template slot="title">{{ vt.name }}</template>
                            <el-menu-item :index="String(vts.id)" v-for="(vts,its) in vt.children" :key="its" >{{ vt.name }}</el-menu-item>
                        </el-submenu>
                </el-submenu>
                <el-menu-item :key="i" :index="String(i)" v-else :class="active==='0'?'active':''">
                    <span slot="title">{{ v.name }}</span>
                </el-menu-item>
            </el-menu>
        </div>
</template>

<script>
    export default {
        props:{
           gList:[Array],
           queryType: ""
           
        },
        data() {
            return {
               active:'',
            //    aboutArr:['简介',"企业文化","联系我们"]
            }
        },
        watch: {
            queryType(NewValue, OldValue) {
                if (NewValue != "" &&  NewValue) {
                    this.active = NewValue
                    this.$emit("childByValue", NewValue);
                }
            }
        },        
        methods: {
            handleOpen(key, keyPath) {
                console.log('handleOpen')
                this.active = key
                this.$emit("childByValue", '2', keyPath);
            },
            handleClose(key, keyPath) {
                console.log('handleClose')
                this.active = key
                this.$emit("childByValue", '2', keyPath);
            },
            select(key, keyPath){
                console.log('select')
                // console.log(key)
                this.active = key
                if(key == 0) {
                    key='1'
                }else if(key == 1) {
                    key='3'
                }
                this.$emit("childByValue", key, keyPath);
            }             
        },
    }
</script>

<style lang="scss" scoped>

</style>